<template>
<div class="center-text">
<div class="box">
  <el-row>
    <el-col :span="10" :offset="1"><div>菜品名称</div></el-col>
    <el-col :span="4" :offset="9"><el-input placeholder="请输入" v-model="DishName"></el-input></el-col>
  </el-row>
</div>

  <div class="box">
    <el-row>
      <el-col :span="10" :offset="1"><div>姓名</div></el-col>
      <el-col :span="4" :offset="9"> <el-select v-model="options.value" class="m-2" placeholder="请选择">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select></el-col>
    </el-row>
  </div>

  <div class="box">
    <el-row>
      <el-col :span="10" :offset="1"><div>菜品价格/元</div></el-col>
      <el-col :span="4" :offset="9"><el-input placeholder="请输入" v-model="price"></el-input></el-col>
    </el-row>
  </div>


  <div class="box">
    <el-row>
      <el-col :span="10" :offset="1"><div>营业时段</div></el-col>
    </el-row>
    <el-row >
      <el-col :span="11" :offset="1"> <el-checkbox v-model="checked1" label="早餐" />
        <el-checkbox v-model="checked2" label="午餐" />
        <el-checkbox v-model="checked3" label="晚餐" />
        <el-checkbox v-model="checked4" label="宵夜" /></el-col>

    </el-row>

  </div>
  <div class="box">
    <el-row>
      <el-col :span="10" :offset="1"><div>菜品图片</div></el-col>
      <el-col :span="3" :offset="10"><div class="pic">
        <el-upload
            class="avatar-uploader"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </div></el-col>
    </el-row>
  </div>
<el-row>
  <el-col :span="4" :offset="8"> <el-button type="primary">确定</el-button></el-col>
  <el-col :span="12" ><el-button type="primary" @click="cancel">取消</el-button></el-col>
</el-row>

</div>

</template>

<script>

export default {
  name: "DishesDialog",
  data(){
    return{
      options:[
        {value: '大白菜', label: '大白菜'},
        {value: '西红柿', label: '西红柿'},
      ],
      price:'',
      DishName:''
    }
  },
  methods:{
    cancel(){
      this.price='';
          this.DishName='';
          this.options.value=''
    }
  }

}
</script>

<style scoped>
.el-input__inner{
  background-color: transparent;
}


*{
  margin: 0;
  padding: 0;
}
/deep/
.el-input__wrapper{
  background-color: rgba(0,0,0,0);
  box-shadow: none;
  outline: none;
}
/deep/
.el-input__wrapper:hover{
  box-shadow: none !important;
}
/deep/
.el-input__inner{
  color: #3a8ee6;
  text-align: right;
}
.center-text{
  background-color: rgb(13,41,67);

}

.box{
background-color: rgb(10,33,54);
  margin-bottom: 20px;
}
.pic{
  width: 50px;
  height: 50px;
  border: 2px dotted white;
  font-size: 30px;
  text-align: center;
  line-height: 50px;
  color: white;
}
.box>div{
  color: white;
  font-size: 16px;
 align-items: center;

}


</style>